import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../core/utils/ali.dart';
import '../../core/providers/navigation_provider.dart';
import '../home/residence_display_screen.dart';
import '../community/social_interaction_screen.dart';
import '../message/communication_center_screen.dart';
import '../my/personal_profile_screen.dart';

class PrimaryNavigationScreen extends ConsumerStatefulWidget {
  const PrimaryNavigationScreen({super.key});

  @override
  ConsumerState<PrimaryNavigationScreen> createState() =>
      _PrimaryNavigationScreenState();
}

class _PrimaryNavigationScreenState
    extends ConsumerState<PrimaryNavigationScreen> {
  final List<Widget> _screenCollection = [
    const ResidenceDisplayScreen(),
    const SocialInteractionScreen(),
    const CommunicationCenterScreen(),
    const PersonalProfileScreen(),
  ];

  final List<NavigationItemConfig> _navigationItems = [
    NavigationItemConfig(
      iconData: AliIcons.iconHome,
      labelText: 'Home',
      routePath: '/residence',
    ),
    NavigationItemConfig(
      iconData: AliIcons.iconCommunity,
      labelText: 'Community',
      routePath: '/social',
    ),
    NavigationItemConfig(
      iconData: AliIcons.iconMessage,
      labelText: 'Chat',
      routePath: '/communication',
    ),
    NavigationItemConfig(
      iconData: AliIcons.iconPerson,
      labelText: 'Profile',
      routePath: '/profile',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final currentTabIndex = ref.watch(navigationProvider);

    return Scaffold(
      backgroundColor: Colors.white,
      extendBody: true,
      body: IndexedStack(index: currentTabIndex, children: _screenCollection),
      bottomNavigationBar: _buildCustomBottomNavigation(),
    );
  }

  Widget _buildCustomBottomNavigation() {
    final currentTabIndex = ref.watch(navigationProvider);

    return Container(
      height: 100.h,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/resources/navigate_bg.png'),
          fit: BoxFit.fill,
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
          child: _navigationItems
              .asMap()
              .entries
              .map((entry) {
                final index = entry.key;
                final item = entry.value;
                final isSelected = currentTabIndex == index;

                return _buildNavigationItem(item, isSelected, index).expanded();
              })
              .toList()
              .toRow(mainAxisAlignment: MainAxisAlignment.spaceAround),
        ),
      ),
    );
  }

  Widget _buildNavigationItem(
    NavigationItemConfig item,
    bool isSelected,
    int index,
  ) {
    return GestureDetector(
      onTap: () => _handleTabSelection(index),
      child: Container(
        padding:
            isSelected
                ? EdgeInsets.symmetric(vertical: 10.h, horizontal: 24.w)
                : EdgeInsets.zero,
        decoration:
            isSelected
                ? BoxDecoration(
                  color: const Color(0xFF2AB061),
                  borderRadius: BorderRadius.circular(100.r),
                )
                : null,
        child: Icon(item.iconData)
            .iconSize(24.w)
            .iconColor(isSelected ? const Color(0xFFFFDB31) : Colors.black),
      ),
    );
  }

  void _handleTabSelection(int index) {
    ref.read(navigationProvider.notifier).switchToTab(index);
  }
}

class NavigationItemConfig {
  final IconData iconData;
  final String labelText;
  final String routePath;

  const NavigationItemConfig({
    required this.iconData,
    required this.labelText,
    required this.routePath,
  });
}
